<template>
  <div class="box">
    <div class="top">
      <div class="jilu">
        <RouterLink to="/home/fangtan/jiazhang" class="jzbtn"
          >家长访谈</RouterLink
        >
        <RouterLink to="/home/fangtan/xuesheng" class="xsbtn"
          >学生访谈</RouterLink
        >
      </div>
      <div class="shuru">
        <el-input
          v-model="input2"
          class="w-50 m-2"
          placeholder="可搜索：访谈对象等信息"
          :prefix-icon="Search"
          size="large"
        />
      </div>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";

import type { TableColumnCtx } from "element-plus";
const input2 = ref("");

const ture = true;

const chuxian = () => {
  return;
};
interface User {
  date: string;
  name: string;
  address: string;
}

const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.address;
};

const multipleSelection = ref<User[]>([]);

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const tableData: User[] = [
  {
    date: "哈哈哈",
    name: "嗯嗯阿",
    address: "嘻嘻",
  },
  {
    date: "哈哈哈",
    name: "嗯嗯阿",
    address: "嘻嘻",
  },
];
</script>

<style lang="less" scoped>
.shuru {
  width: 400px;
  height: 40px;
}
.el-input--large {
  border-radius: 20px;
}
.top {
  display: flex;
  justify-content: space-between;
}
.jzbtn {
  width: 100px;
  height: 40px;
  background-color: #1d8f8d;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  color: white;
  cursor: pointer;
}
.xsbtn {
  width: 100px;
  height: 40px;
  background-color: #e3f5f6;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  color: #1d8f8d;
  margin-left: 10px;
  cursor: pointer;
}
.xzft {
  width: 60px;
  height: 30px;
  background-color: #e3f5f6;
  display: inline-block;
  line-height: 30px;
  text-align: center;
  color: #1d8f8d;
  margin-right: 10px;
  font-weight: 600;
  cursor: pointer;
}
.ftlist {
  text-align: right;
  margin-top: 20px;
}
</style>
